import {ScrollView, View, Text, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import moment from 'dayjs';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import Blank from '@/pages/common/blank';
import notdataImg from '@/assets/image/none/none.png';
import rightImg from '@/assets/image/communityService/right.png';
import bookImg from '@/assets/image/communityService/book.png';
import clothingImg from '@/assets/image/communityService/clothing.png';

const flowState = (status) => {
  if (status == 0) {
    return '预约成功';
  } else if (status == 2) {
    return '等待揽收';
  } else if (status == 21) {
    return '已揽收';
  } else if (status == 3) {
    return '已开单';
  } else if (status == 4) {
    return '无法取件';
  } else if (status == 5) {
    return '已签收';
  } else if (status == 6) {
    return '已取消';
  }
};

const flowWeek = (status) => {
  if (status == 0) {
    return '天';
  } else if (status == 1) {
    return '一';
  } else if (status == 2) {
    return '二';
  } else if (status == 3) {
    return '三';
  } else if (status == 4) {
    return '四';
  } else if (status == 5) {
    return '五';
  } else if (status == 6) {
    return '六';
  }
};

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
      tabList: [
        {status: 0, text: '全部'},
        {status: 1, text: '待取件'},
        {status: 2, text: '上门中'},
        {status: 3, text: '已完成'},
      ],
    };
  }

  componentDidMount() {}

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  renderTabList(list) {
    let listView = [];
    let {
      main: {curNow},
      actions: {action},
    } = this.props;
    list.map((item) => {
      listView.push(
        <View
          className="t_view"
          onClick={() => {
            action.commonChange('main.curNow', item.status);
            action.commonChange('main.orderList', []);
            action.commonChange('main.pageNum', 0);
            action.page();
          }}
        >
          <Text className={curNow == item.status ? 't_a_text' : 't_text'}>{item.text}</Text>
          <View className={curNow == item.status ? 't_a_border' : 't_border'}></View>
        </View>,
      );
    });
    return listView;
  }

  renderList(list) {
    let listView = [];
    list.map((item, index) => {
      listView.push(
        <View className="list">
          <View className="topBox">
            <View className="leftBox">
              <Text className="order">订单号:{item.orderNo}</Text>
              <Image className="rightImg" src={rightImg} mode="widthFix" />
            </View>
            <Text className="right" style={item.whaleOrderStatus == 6 ? {color: '#999999'} : {color: '#218cff'}}>
              {flowState(item.whaleOrderStatus)}
            </Text>
          </View>
          <View className="main">
            <View>
              <Image className="iconImg" src={item.type == 'book' ? bookImg : clothingImg} mode="widthFix" />
            </View>
            <View className="rightBox">
              <Text className="title">
                {item.type == 'book' ? '书籍回收' : '衣物回收'} {item.weight}
              </Text>
              <View className="itemBox">
                <View className="label">上门时间</View>
                <View className="text">
                  {moment(item.reservationDate).year() +
                    '年' +
                    (moment(item.reservationDate).month() + 1) +
                    '月' +
                    moment(item.reservationDate).date() +
                    '(星期' +
                    flowWeek(moment(item.reservationDate).day()) +
                    ')'}
                </View>
              </View>
              <View className="itemBox">
                <View className="label">取件地址</View>
                <View className="text">{item.address}</View>
              </View>
              <View className="itemBox">
                <View className="label">联系方式 </View>
                <View className="text">
                  {item.name} {item.mobile}
                </View>
              </View>
            </View>
          </View>
          <View className="flexEnd">
            {item.whaleOrderStatus == 0 && (
              <View
                className="editBtn"
                onClick={(e) => {
                  e.stopPropagation();
                  if (item.type == 'book') {
                    Taro.navigateTo({
                      url: '/pages/package-D/bookReservation/index?type=edit&orderId=' + item.whaleOrderId,
                    });
                  } else {
                    Taro.navigateTo({
                      url: '/pages/package-D/clothingReservation/index?type=edit&orderId=' + item.whaleOrderId,
                    });
                  }
                }}
              >
                修改/取消订单
              </View>
            )}
            {item.whaleOrderStatus == 21 && (
              <View
                className="logisticsBtn"
                onClick={(e) => {
                  e.stopPropagation();
                  Taro.navigateTo({
                    url: '/pages/package-D/logisticsInformation/index?orderId=' + item.whaleOrderId,
                  });
                }}
              >
                物流查看
              </View>
            )}
          </View>
        </View>,
      );
    });
    return listView;
  }

  _onScrollToLower = () => {
    let {
      main: {pageNum, totalPage},
      actions: {action},
    } = this.props;
    let num = pageNum + 1;
    if (num == totalPage) return;
    this.props.actions.action.commonChange('main.pageNum', num);
    this.props.actions.action.page();
  };

  _onRefresherRefresh = () => {
    const {refresherTriggered} = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    this.props.actions.action.commonChange('main.pageNum', 0);
    this.props.actions.action.page();
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  render() {
    let {tabList, refresherTriggered} = this.state;
    let {
      main: {orderList, pageNum, totalPage, isLoading},
      actions: {action},
    } = this.props;
    return (
      <View className="packageDEquityOrders">
        <View className="t_row">{this.renderTabList(tabList)}</View>
        <ScrollView
          className="scrollView"
          scrollY
          onScrollToLower={this._onScrollToLower}
          refresherEnabled
          refresherTriggered={refresherTriggered}
          onRefresherPulling={this._onRefresherRefresh}
        >
          {orderList && orderList.length > 0 ? (
            this.renderList(orderList)
          ) : (
            <Blank
              content="您还没有订单信息哦~"
              img={notdataImg}
              imgStyle={{width: '400rpx', height: '400rpx'}}
              textStyle={{
                fontSize: '32rpx',
                color: '#999999',
                textAlign: 'center',
                marginTop: '40rpx',
              }}
            />
          )}
          {orderList.length != 0 && pageNum + 1 != totalPage && <View className="status">加载中</View>}
          {!isLoading && orderList.length != 0 && pageNum + 1 == totalPage && (
            <View className="status">没有更多了</View>
          )}
        </ScrollView>
      </View>
    );
  }
}
